<!-- 滑动切换选项卡演示(标准写法) -->
<template>
	<!-- 使用z-paging-swiper为根节点可以免计算高度 -->
	<z-paging-swiper>
		<!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
		<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
		<template #top>
			<slot name="tabsTop">
				<!-- tabs的上面 -->
			</slot>
			<leo-tabs ref="tabs" v-if="tabsList.length>0" :list="tabsList" :current="tabsIndex" @change="tabsChange">
				<template #left>
					<slot name="tabsLeft">
						<!-- tabs的左边 -->
					</slot>
				</template>
				<template #right>
					<slot name="tabsRight">
						<!-- tabs的右边 -->
					</slot>
				</template>
				<slot name="tabsTop"></slot>
			</leo-tabs>
			<slot name="tabsBottom">
				<!-- tabs的下面 -->
			</slot>
		</template>
		<!-- #ifndef APP-NVUE -->
		<view class="content" :class="{'transform':transform}">
			<!-- 需要给content设置height: 100%;transform: translateZ(0); 避免因为fixed带来全局渲染问题 -->
			<slot name="content" :data="{index:tabsIndex}"></slot>
		</view>
		<!-- #endif -->
		<!-- #ifdef APP-NVUE -->
		<list class="flex-1">
		    <!-- 注意事项: 不能使用 index 作为 key 的唯一标识 ** cell 不能设置flex-1，不能设置高度，不然不能滚动 -->
		    <cell class="">
		      <slot name="content" :data="{index:tabsIndex}"></slot>
		    </cell>
		  </list>
		<!-- #endif -->
		<template #bottom>
			<slot name="bottom"></slot>
		</template>
	</z-paging-swiper>
</template>

<script>
	export default {
		props:{
			tabsList:{	// 列表
				type: Array,
				default: []
			},
			transform:{
				type: Boolean,
				default: true
			},
			current:{
				type: Number,
				default: 0
			},
			customStyle:{
				type: Object,
				default: {
					padding: '0 0 0 0',
				}
			}
		},
		data() {
			return {
				tabsIndex:0
			};
		},
		created() {
			this.tabsIndex = this.current;
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.$emit("update:current",index);
				this.$emit("change",index);
				this.tabsIndex = index;
			}
		}
	}
</script>
<style lang="scss" scoped>
	.transform{
		transform: translateY(0);
	}
	.content {
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
		:deep(){
			// 微信小程序会多嵌一层view--综合一起设置
			/* #ifndef APP-NVUE */
			&>view{
				height: 100%;
				/* #ifdef MP-WEIXIN */
				&>view{
					height: 100%;
				}
				/* #endif */
			}
			/* #endif */
		}
	}
</style>

